<!--
 * @Author: tushan
 * @Date: 2022-12-06 20:46:49
 * @LastEditors: tushan
 * @LastEditTime: 2022-12-06 20:47:09
 * @Description:
-->
<template>
  <div id="iconGroupBox" @click="props.reload">
    <div class="groupName" @click.stop>
      <el-input @blur="saveNAme" v-model="pidInfo.name"></el-input>
    </div>
    <div class="model" @dragleave="leave($event)" @dragenter="al($event)">
      <div id="iconGroupItem" class="iconGroupItem itxst" @click.stop="closeEdit">
        <transition v-for="item in Arraysort(list)" :key="item.id">
          <Icon
            @click.stop
            :data="item"
            :data-type="item?.type"
            :data-id="item?.id"
          ></Icon>
        </transition>
      </div>
    </div>
  </div>
</template>
<script setup>
import emitter from "@/util/emitter";
import { useStore } from "vuex";
import Icon from "@/components/icon.vue";
import { defineProps, onMounted, onUnmounted, ref, shallowRef } from "vue";
import $ from "jquery";
import { Arraysort, deepMerge } from "../../util/tools";
const store = useStore();
const list = shallowRef([]);
const pid = ref();
const pidInfo = ref({});
window.$ = $;
const props = defineProps({
  data: Object,
  reload: Function,
});
const closeEdit = () => {
  if (store.state.editStatus) {
    store.state.editStatus = false;
  }
};
let isLeave = true;
const leave = (event) => {
  if (event.relatedTarget.className == "model") {
    isLeave = true;
    clearTimeout(tvv);
    props.reload();
  }
};
const al = (event) => {
  if (event.relatedTarget.id == "iconGroupBox") {
    isLeave = false;
  }
};
const saveNAme = () => {
  store.commit("setLink", pidInfo.value);
  $(`[data-id='${pid.value}']`).find(".names").text(pidInfo.value.name);
};
var sortableTips = null;
const saveGroup = () => {
  var sortArr = sortableTips.toArray();
  let tmp = [];
  sortArr.forEach((el, index) => {
    let info = store.getters.find(el);
    info.pid = pid.value;
    info.sort = index;
    tmp.push(info);
  });
  store.commit("updateDiffLink", Object.assign([], tmp));
  emitter.emit("RefreshLink");
  if (props.data.type == "add") {
    clearTimeout(tvv);
    props.reload();
  }
};
let MoveInfo = null;
const start = () => {
  var eldom = document.getElementById("iconGroupItem");
  var ops = {
    animation: 200,
    delay: 500,
    delayOnTouchOnly: true,
    draggable: ".item",
    group: {
      name: "it",
      pull: function (evt) {
        let toId = evt.el.id;
        const type = MoveInfo.item.dataset.type;
        if (type === "icon" && toId === "footer-itxst") {
          return "clone";
        }
        return true;
      },
      put: true,
    },
    onChoose: function (env) {
      MoveInfo = env;
      window.MoveData = { type: env.item.dataset.type };
    },
    onMove: function (evt) {
      if (!evt.dragged.dataset.type && !evt.related.dataset.url) return true; //没有目标则禁止放行
      if (evt.dragged.dataset.type === "component") {
        return true;
      }
      if (evt.related.dataset.url === "iconGroup") {
        return false;
      } else {
        return true;
      }
    },
    onUpdate(evt) {
      saveGroup();
    },
    onAdd(evt) {
      saveGroup();
    },
  };
  sortableTips = window.Sortable.create(eldom, ops);
};
let tvv = setTimeout(() => {});
onMounted(() => {
  tvv = setTimeout(() => {
    if (props.data.type == "add") {
      if (isLeave) {
        clearTimeout(tvv);
        props.reload();
      }
    }
  }, 2000);
  pid.value = props.data.pid;
  pidInfo.value = store.getters.find(props.data.pid);
  list.value = deepMerge([], store.getters.findChildren(props.data.pid));
  start();
});
onUnmounted(() => {
  emitter.off("saveGroup", saveGroup);
});
</script>
<style lang="less">
.model {
  position: relative;
  width: 500px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-30px) !important;
}
#iconGroupBox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  backdrop-filter: blur(20px);
  transition: all 0.5s;
  background-color: rgba(61, 61, 61, 0.631);
  display: flex;
  flex-direction: column;
  align-items: center;

  .groupName {
    margin-bottom: 30px;
    transform: translateY(-30px);

    > .el-input {
      width: 200px;
      height: 35px;
      background-color: transparent;

      > .el-input__wrapper {
        border-radius: 10px;
        background-color: rgba(139, 139, 139, 0.325);

        > .el-input__inner {
          color: #fff;
        }
      }
    }
  }

  justify-content: center;

  .iconGroupItem {
    &::-webkit-scrollbar {
      display: none;
    }

    overflow-y: scroll;
    transition: all 0.3s;
    transform: translateZ(0px);
    width: 360px;
    height: 390px;
    border-radius: var(--iconRadius);
    display: grid;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.49);
    grid-template-columns: repeat(4, 60px);
    grid-column-gap: 26px;
    grid-auto-flow: dense;
    grid-template-rows: repeat(auto-fill, 92px);
  }
}
</style>
